<template>
  <div class="role">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="pageContentConfig"
      ref="pageContentRef"
      @createData="changeDialogVisible"
      @edit="handleEdit"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="pageModalConfig"
      :defaultInfo="defaultInfo"
    >
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from "@/components/page-search";
import PageContent from "@/components/page-content";
import PageModal from "@/components/page-modal";
import { pageSearchConfig } from "./config/search";
import { pageContentConfig } from "./config/content";
import { pageModalConfig } from "./config/modal";
import { usePageSearch } from "@/hooks/usePageSearch";
import { usePageModal } from "@/hooks/usePageModal";

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch();

// 新增数据的弹窗的显示,编辑数据的弹窗显示

const [pageModalRef, defaultInfo, changeDialogVisible, handleEdit] =
  usePageModal();
</script>

<style lang="less" scoped>
.role {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
